<template>
  <div>
    <div class="header">
      <div class="date-part">
        <el-button icon="el-icon-arrow-left" round plain color="#2D75D7" size="mini" @click="handleDeviation(-1)" />
        <span>{{ beginTimeStatusondition }}</span>
        至
        <span>{{ endTimeStatusCondition }}</span>
        <el-button icon="el-icon-arrow-right" round plain color="#2D75D7" size="mini" @click="handleDeviation(1)" />
        <el-button style="margin-left: 20px;" plain hairline color="#2D75D7" size="small"
          @click="handleDeviation(0)">本周</el-button>
      </div>
      <div class="right-part">
        场地:
        <el-select v-model="site" placeholder="请选择" @change="queryDate">
          <el-option v-for="item in siteOptions" :key="item.id" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <table border-collapse: collapse border stripe class="date-table">
      <thead>
        <tr style="background-color:#F8F8F8;">
          <th class="days" rowspan="2" style="background-color:#F8F8F8; width:12.5%;">
            <div class="th-inner" style="color: #000;font-weight:800">会议室</div>
            <!-- <div class="fht-cell"></div> -->
          </th>
          <th v-for="(item, i) in dateList" :class="item.date == today ? 'isToday' : ''" align="center" :key="i"
            colspan="2">
            <div>{{ item.date + ' ' + item.week }}</div>
          </th>
        </tr>
        <tr style="background-color:#F8F8F8;">
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>上午</div>
          </th>
          <th class="date-table-td" align="center">
            <div>下午</div>
          </th>
        </tr>
      </thead>
      <tbody v-if="file_is_show">
        <tr v-for="(item, i) in arrangeData" :key="i">
          <th style="background-color:#F8F8F8; width:12.5%;">
            <div class="th-inner">{{ item.meetName }}(房间号: {{ item.meetId }})</div>
          </th>
          <th class="date-table-td tall-td" align="center" v-for="(son, j) in item.occupyList" :key="j">
            <!-- <el-tooltip placement="top" v-if="son.stat == 1" effect="light"> -->
            <!-- <div slot="content">
                <h3>{{ son.meetList.flSubject }}</h3>
                <p>预约人: {{ son.meetList.flCreator }}</p>
                <p>联系方式: {{ son.meetList.flCreatorPhone }}</p>
                <p>时间: {{ son.meetList.startTime + '~' + son.meetList.endTime }}</p>
                <p>备注: {{ son.meetList.remark }}</p>
              </div> -->
            <div v-if="son.stat == 1" class="reserved" @click="openDialog(son, j)">已预定</div>
            <!-- </el-tooltip> -->
            <!-- <el-tooltip placement="top" v-else effect="light" content="点击预定">
              <div @click="openDialog(item, j)"></div>
            </el-tooltip> -->
          </th>
        </tr>
      </tbody>
    </table>
    <div class="bottom-part">
      未预定 <span class="color-icon"></span>
      已预定 <span class="color-icon2"></span>
      注意：请在当前时间之后预定。
    </div>

    <apply-detail v-if="upload.open" :upload="upload" @closeDialog="closeDialog"></apply-detail>
  </div>
</template>

<script>
import { hyapList, listdata } from '../../../api/xzgl/hyyd';
import { getSitedata } from "@/api/xzgl/zygl/index";

import applyDetail from './applyMeetDetail.vue';

export default {
  components: { applyDetail },
  data() {
    return {
      dateList: [
        { date: '', week: '周一' },
        { date: '', week: '周二' },
        { date: '', week: '周三' },
        { date: '', week: '周四' },
        { date: '', week: '周五' },
        { date: '', week: '周六' },
        { date: '', week: '周日' },
      ],
      deviation: 0,
      arrangeData: [],
      today: this.parseTime(new Date(), '{y}-{m}-{d}'),
      beginTimeStatusondition: '',
      endTimeStatusCondition: '',
      occupyList: [],
      file_is_show: true,
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "会议室预约情况",
        row: {}
      },
      site: '',
      siteOptions: []
    };
  },
  watch: {
    occupyList: {
      handler() { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        this.file_is_show = false
        this.$nextTick(() => { // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
          this.file_is_show = true
        })
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
  },
  created() {
    this.getSite()
    this.getMonSunday()
  },
  methods: {
    getSite() {
      const params = {
        name: '',
        pageNum: 1,
        pageSize: 999,
        orgName: '',
        status: 1
      }
      getSitedata(params).then(res => {
        // console.log('resIte', res)
        this.siteOptions = res.rows.map(e => {
          return {
            ...e,
            label: e.name,
            value: e.id
          }
        })
      })
    },
    getMonSunday() {
      var now = new Date();
      var nowTime = now.getTime();
      var day = now.getDay();
      var oneDayTime = 24 * 60 * 60 * 1000;
      // 获取选择器上的日期
      nowTime = nowTime + oneDayTime * this.deviation * 7
      // console.log('nowTime', nowTime)
      //显示周一
      var MondayTime = nowTime - (day - 1) * oneDayTime;
      //显示周日
      var SundayTime = nowTime + (7 - day) * oneDayTime;
      //初始化日期时间
      var monday = new Date(MondayTime);
      var sunday = new Date(SundayTime);
      //打印查看结果
      console.log(monday); //返回结果为时间戳
      console.log(sunday);

      this.beginTimeStatusondition = this.parseTime(monday, '{y}-{m}-{d}')
      this.endTimeStatusCondition = this.parseTime(sunday, '{y}-{m}-{d}')

      this.dateList.forEach((e, i) => {
        e.date = this.parseTime(MondayTime + oneDayTime * i, '{y}-{m}-{d}')
      })

      // console.log('dateList', this.dateList)
      this.queryDate()
    },
    queryDate() {
      const params = {
        // beginTimeStatusondition: this.beginTimeStatusondition,
        // endTimeStatusCondition: this.endTimeStatusCondition,
        status: 1,
        siteId: this.site,
        pageNum: 1,
        pageSize: 999
      }
      listdata(params).then(res => {
        this.arrangeData = res.rows.map(e => {
          return {
            ...e,
            occupyList: new Array(14).fill(null).map(() => ({ stat: 0, meetList: [], meetInfo: {} })),
            // occupyList: new Array(14).fill(0),
            // meetList: []
          }
        })
        // console.log('arrangeData', this.arrangeData)
        this.handleData()
      })
    },
    handleData() {
      // this.arrangeData.sort(function(a,b){
      //   return Number(a.meetId) - Number(b.meetId)
      // });
      const params = {
        beginTimeStatusondition: this.beginTimeStatusondition,
        endTimeStatusCondition: this.endTimeStatusCondition,
      }

      hyapList(params).then(res => {
        // console.log('res', res)
        res.rows.forEach(e => {
          if (this.arrangeData.some(i => i.id == e.meetingId)) {
            let startDays = new Date(e.startTime).getDay() == 0 ? 14 : new Date(e.startTime).getDay() * 2
            let endDays = new Date(e.endTime).getDay() == 0 ? 14 : new Date(e.endTime).getDay() * 2
            let startPosition = e.startTime[11] == '1' && e.startTime[12] != '0' && e.startTime[12] != '1' ? (startDays - 1) : (startDays - 2)
            let endPosition = e.endTime[11] == '1' && e.endTime[12] != '0' && e.endTime[12] != '1' ? (endDays - 1) : (endDays - 2)
            // console.log('st ed', startPosition, endPosition)
            let meetListItem = {}
            this.arrangeData.forEach(i => {
              meetListItem.flCreatorPhone = e.flCreatorPhone
              meetListItem.flFormName = e.flFormName
              meetListItem.flCreator = e.flCreator
              meetListItem.flSubject = e.flSubject
              meetListItem.numPeople = e.numPeople
              meetListItem.startTime = e.startTime
              meetListItem.endTime = e.endTime
               
              if (i.id == e.meetingId) {
                i.occupyList.forEach((son, index) => {
                  if (index >= startPosition && index <= endPosition) {
                    son.stat = 1
                    son.meetList.push(meetListItem)
                    son.meetInfo.orgName = i.orgName
                    son.meetInfo.meetName = e.meetName
                    son.meetInfo.meetId = e.meetId
                  }
                })
                this.occupyList.push(i.occupyList)
                // console.log('occupyList', this.occupyList)
              }
            })
          }
        })
        // console.log('arrangeData', this.arrangeData)
      })
    },
    handleDeviation(step) {
      if (step == 0) {
        this.deviation = 0
      } else {
        // console.log('step', step)
        this.deviation += step
        // console.log('deviation', this.deviation)
      }
      this.getMonSunday()
    },
    openDialog(item, j) {
      // var now = new Date();
      // var day = now.getDay() == 0 ? 7 : now.getDay();
      // if (day > Math.round((j + 1) / 2) && this.deviation == 0 || this.deviation < 0) {
      //   return this.$message.warning('已过可预定时间')
      // } else {
      // console.log('item', item, j)
      this.upload.row = item
      this.upload.open = true
      // }
    },
    closeDialog() {
      this.upload.open = false
      // this.getMonSunday()
    }
  }
}
</script>

<style scoped lang="scss">
body {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-part {
  width: 40%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;

  div {
    margin: 0 15px;
    font-size: 16px;
  }
}

.right-part {
  margin-right: 10px;
}

.info-part {
  background-color: #fff;
  padding: 20px 10px;
  font-size: 15px;
  margin-top: 10px;
  line-height: 30px;
  padding-bottom: 0;

  p {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .btn-extend {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #2D75D7;
    margin-top: 10px;
  }
}

.date-table th,
.date-table td {
  border: 1.5px solid #CFCCCC;
  text-align: center;
}

.date-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  table {
    min-width: 0 !important;
  }

  ::v-deep .uni-table-th-content {
    flex-direction: column;
  }

  &-td {
    padding: 0;
  }

  .tall-td {
    min-height: 146px;

    ::v-deep .uni-table-td {
      line-height: 43px;
    }
  }
}

th {
  color: #555555 !important;
  font-weight: normal;

  div {
    padding: 20px
  }
}

.isToday {
  background-color: #2D75D7;

  div {
    color: #fff;
  }
}

.reserved {
  color: white;
  background-color: #30AF84;
  cursor: pointer;
}

.bottom-part {
  display: flex;
  padding: 10px;

  .color-icon {
    width: 40px;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ccc;
    height: 20px;
    text-align: center;
    margin: 0 10px
  }

  .color-icon2 {
    width: 40px;
    display: inline-block;
    background-color: #30AF84;
    border: 1px solid #30AF84;
    height: 20px;
    text-align: center;
    margin: 0 10px
  }
}
</style>